<template>
    <view class="page">
        <view class="page-flex-top">
            <view class="search-input">
                <input type="text" v-model="keyWords" :confirm-type="search" @confirm="searchSomething" placeholder="搜索诉求与资讯" placeholder-style="color:#B5B5B5;">
                <icon class="search-icon" type="search" size="16"></icon>
                <img :src="File_Url+'delinput.png'" v-if="keyWords.length>0" @click.stop="clearKeywords">
            </view>
            <view class="search-btn" @click="returnBack" v-if="keyWords.length==0">
                <text>取消</text>
            </view>
            <view class="search-btn" @click="searchSomething" v-if="keyWords.length>0">
                <text>搜索</text>
            </view>
        </view>
        <view class="page-body-list" v-if="!resultShow&&latelySearch.length>0">
            <view class="body-list-header">
                <view class="header-left">
                    <img :src="File_Url+'search-icon-litter.png'" />
                    <text>最近搜索</text>
                </view>
                <view class="header-right" @click="clearLately">
                    <img :src="File_Url+'allclear.png'" />
                    <text>清空</text>
                </view>
            </view>
            <view class="body-list">
                <view class="body-list-item" v-for="(item, index) in latelySearch" :key="index" @click="searchWords(item)">{{item}}</view>
            </view>
        </view>
        <view class="page-body-list" v-if="!resultShow&&popularSearch.length>0">
            <view class="body-list-header">
                <view class="header-left">
                    <img :src="File_Url+'hotsearch.png'" />
                    <text>热搜</text>
                </view>
            </view>
            <view class="body-list">
                <view class="body-list-item" v-for="(item, index) in popularSearch" :key="index" @click="searchWords(item)">{{item}}</view>
            </view>
        </view>
        <view class="page-body-result" v-if="resultShow">
<!--            <view class="vipUnit-result">-->
<!--                <view class="vipUint-result-head">-->
<!--                    <text>相关服务商</text>-->
<!--                    <text class="result-number">({{vipNumber}})</text>-->
<!--                </view>-->
<!--                <view class="vipUint-result-list">-->
<!--                    <view class="null" v-if="vipNumber==0">-->
<!--                        无相关服务商！-->
<!--                    </view>-->
<!--                    <view class="vipUnit-result-item" v-if="vipNumber>0" v-for="(item, index) in vipList" :key="index" @click="skipMemberDetail(item.id)">-->
<!--                        <view class="item-left">-->
<!--                            <img :src="item.photo_url" />-->
<!--                            <img class="icon" :src="File_Url+'vip-icon.png'" />-->
<!--                        </view>-->
<!--                        <view class="item-right">-->
<!--                            <view class="item-name">{{item.name}}</view>-->
<!--                            <view class="item-desc" v-html="item.introduction"></view>-->
<!--                        </view>-->
<!--                    </view>-->
<!--                </view>-->
<!--            </view>-->
            <view class="needs-result">
                <view class="needs-result-head">
                    <text>相关诉求</text>
                    <text class="result-number">({{demandNumber}})</text>
                </view>
                <view class="needs-result-list">
                    <view class="null" v-if="demandNumber==0">
                        无相关诉求！
                    </view>
                    <view class="needs-result-item" v-if="demandNumber>0" v-for="(item, index) in demandList" :key="index" @click="skipNeedsDetail(item.id)">
                        <view class="item-head">
                            <view class="item-head-left">{{item.title}}</view>
                            <view :class="{'item-head-right':true,'blue':item.status==0,'green':item.status==1}">{{item.status==0?'筛选中':'对接成功'}}</view>
                        </view>
                        <view class="item-content">
                            <view class="item-content-text">{{item.content}}</view>
                            <view class="item-content-tip" v-if="item.label_arr.length>0">
                                <view class="tip-item" v-for="(tip, ids) in item.label_arr" :key="ids">{{tip}}</view>
                            </view>
                            <view class="item-content-img" v-if="item.img_array_url.length>0">
                                <img v-for="(url, ids) in item.img_array_url" :key="ids" :src="url">
                            </view>
                        </view>
                        <view class="item-foot">
                            <view class="item-foot-left">
                                <view class="foot-left-item">
                                    <img :src="File_Url+'eyes-icon.png'" />
                                    <text>{{item.browse_num}}</text>
                                </view>
                                <view class="foot-left-item">
                                    <img :src="File_Url+'collect-active.png'" v-if="item.is_collection==1"/>
                                    <img :src="File_Url+'collect.png'" v-else/>
                                    <text>{{item.attention_num}}</text>
                                </view>
                            </view>
                            <view class="item-foot-right">{{item.updated_at.split(' ')[0]}}</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="news-result">
                <view class="news-result-head">
                    <text>相关资讯</text>
                    <text class="result-number">({{newsNumber}})</text>
                </view>
                <view class="news-result-list">
                    <view class="null" v-if="newsNumber==0">
                        无相关资讯！
                    </view>
                    <view class="news-result-item" v-if="newsNumber>0" v-for="(item, index) in newsList" :key="index" @click="skipNewsDetail(item.id)">
                        <view class="news-item-left">
                            <view class="item-content-text">
                                {{item.title}}
                            </view>
                            <view class="item-content-tip">
                                <view v-for="(ite,inde) in item.lable_array" :key="inde">{{ite}}</view>
                            </view>
                            <view class="item-content-time">
                                {{item.created_at.split(' ')[0]}}
                            </view>
                        </view>
                        <view class="news-item-right">
                            <img :src="item.img_url" />
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "search",
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                keyWords:'',
                resultShow: false,
                demandList: [],
                newsList: [],
                vipList: [],
                demandNumber: 0,
                newsNumber: 0,
                vipNumber: 0,
                latelySearch: ['UI','复工'],
                popularSearch: ['陈江街道','UI'],
            }
        },
        onShow(){
            this.getSearchKeyword();
        },
        methods:{
            //获取搜索记录与推荐关键词
            async getSearchKeyword(){
                const res = await this.$api.getSearchKeyword({user_token: uni.getStorageSync('userToken')});
                if (res.data.level == 'success'){
                    this.latelySearch = Array.from(new Set(res.data.data.my_history));
                    this.popularSearch = res.data.data.recommend_keyword;
                }
            },
            //搜索需求、资讯
            async searchSomething(){
                let params = {
                    keyword: this.keyWords,
                    limit: 4,
                    page: 1,
                    user_token: uni.getStorageSync('userToken'),
                }
                const res = await this.$api.searchSomething(params);
                if (res.data.level == 'success'){
                    this.demandList = res.data.data.demand;
                    this.newsList = res.data.data.news;
                    let str = res.data.data.vip_unit;
                    for(let i =0; i < str.length; i++){
                        if (str[i].introduction != null){
                            str[i].introduction = str[i].introduction.replace(/<img[^>]*>/gi, function(match, capture){
                                return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, '')
                            });
                            str[i].introduction = str[i].introduction.replace(/\<img/gi, '<img style="display:none" ');
                        }
                    }
                    this.vipList = str
                    this.demandNumber = res.data.page_info.demand_total;
                    this.newsNumber = res.data.page_info.news_total;
                    this.vipNumber = res.data.page_info.unit_total;
                    this.resultShow = true;
                }
            },
            //跳转资讯详情页面
            skipNewsDetail(id){
                uni.navigateTo({
                    url:'/pages/details/newsDetail/newsDetail?newsId='+id
                })
            },
            //跳转需求详情页面
            skipNeedsDetail(id){
                uni.navigateTo({
                    url:'/pages/details/needsDetail/needsDetail?needsId='+id
                })
            },
            //跳转到单位详情
            skipMemberDetail(id){
                uni.navigateTo({
                    url: '/pages/memberUnit/MemberDetail/MemberDetail?memberId='+id
                })
            },
            //返回上一层
            returnBack(){
                uni.navigateBack({
                    delta: 1
                })
            },
            searchWords(words){
                this.keyWords = words;
                this.searchSomething();
            },
            clearKeywords(){
                this.keyWords = '';
                this.resultShow = false;
                this.getSearchKeyword();
            },
            async clearLately(){
                const res = await this.$api.delMykeywordRecord({user_token: uni.getStorageSync('userToken')});
                if (res.data.level == 'success'){
                    this.getSearchKeyword();
                }
            }
        },
        watch:{
            // keyWords(newValue, oldValue){
            //     newValue = newValue.trim();
            //     if (newValue != ''){
            //         // this.keyWords = newValue;
            //         this.resultShow = true;
            //     }else {
            //         // this.keyWords = newValue;
            //         this.resultShow = false;
            //     }
            // }
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        padding-top: 100rpx;
        height: calc(100vh - 100rpx);
        background: #F4F4F4;
    }
    .page-flex-top{
        position: fixed;
        top: 0;
        left: 0;
        height: 60rpx;
        width: calc(100vw - 80rpx);
        background: #FFFFFF;
        padding: 20rpx 40rpx;
        @include flex(flex-start);
        flex-direction: row;
        .search-input{
            width: calc(100% - 86rpx);
            position: relative;
            input{
                padding: 0rpx 20rpx 0rpx 70rpx;
                background: rgba(219, 219, 219, 0.2);
                border-radius: 30rpx;
                border: 2rpx solid rgba(219, 219, 219, 0.3);
                height: 48rpx;
                font-size: 28rpx;
                color: #333333;
                line-height: 48rpx;
            }
            .search-icon{
                position: absolute;
                top: 10rpx;
                left: 20rpx;
            }
            img{
                width: 62rpx;
                height: 40rpx;
                position: absolute;
                z-index: 9999;
                top: 7rpx;
                right: 15rpx;
                padding: 4rpx 0 4rpx 30rpx;
            }
        }
        .search-btn{
            margin-left: auto;
            text{
                width: 56rpx;
                height: 40rpx;
                line-height: 40rpx;
                font-size: 28rpx;
                color: #333333;
            }
        }
    }
    .page-body-list{
        padding: 40rpx 30rpx 0 30rpx;
        .body-list-header{
            @include flex(flex-start);
            flex-direction: row;
            .header-left{
                @include flex(flex-start);
                flex-direction: row;
                text{
                    height: 40rpx;
                    line-height: 40rpx;
                    font-size: 28rpx;
                    color: #4A4A4A;
                    margin-left: 8rpx;
                }
                img{
                    width: 24rpx;
                    height: 24rpx;
                }
            }
            .header-right{
                margin-left: auto;
                @include flex(flex-start);
                flex-direction: row;
                text{
                    height: 40rpx;
                    line-height: 40rpx;
                    font-size: 28rpx;
                    color: #999999;
                    margin-left: 8rpx;
                }
                img{
                    width: 24rpx;
                    height: 24rpx;
                }
            }
        }
        .body-list{
            @include flexWrap(flex-start);
            flex-direction: row;
            padding-bottom: 20rpx;
            .body-list-item{
                padding: 0 20rpx;
                margin: 20rpx 0rpx 0 20rpx;
                height: 50rpx;
                line-height: 50rpx;
                font-size: 28rpx;
                background: #E6E6E6;
                border-radius: 25rpx;
                color: #4A4A4A;
            }
        }
    }
    .page-body-result{
        padding-top: 22rpx;
        .needs-result{
            background: #FFFFFF;
            margin-bottom: 92rpx;
            .needs-result-head{
                height: 78rpx;
                padding: 0 30rpx;
                border-bottom: 2rpx solid #F1F1F1;
                @include flex(flex-start);
                flex-direction: row;
                text{
                    height: 40rpx;
                    line-height: 40rpx;
                    font-size: 28rpx;
                }
                .result-number{
                    color: #3782FF;
                    margin-left: 14rpx;
                }
            }
            .needs-result-list{
                .needs-result-null{
                    padding: 64rpx 0;
                    text-align: center;
                    color: #999999;
                    font-size: 28rpx;
                }
                .needs-result-item{
                    padding: 26rpx 30rpx 20rpx 30rpx;
                    border-bottom: 1rpx solid #E5E5E5;
                    .item-head{
                        @include flex(flex-start);
                        flex-direction: row;
                        height: 45rpx;
                        .item-head-left{
                            height: 45rpx;
                            line-height: 45rpx;
                            font-size: 32rpx;
                            color: #333333;
                            font-weight: ceil(600);
                        }
                        .item-head-right{
                            margin-left: auto;
                            height: 40rpx;
                            line-height: 40rpx;
                            font-size: 28rpx;
                        }
                        .blue{
                            color: #3782FF;
                        }
                        .green{
                            color: #00C735;
                        }
                        .red{
                            color: #FF6565;
                        }
                    }
                    .item-content{
                        padding: 16rpx 0;
                        .item-content-text{
                            max-height: 111rpx;
                            font-size: 26rpx;
                            color: #333333;
                            line-height: 37rpx;
                            @include ellipsis(3);
                        }
                        .item-content-tip{
                            padding-top: 16rpx;
                            @include flex(flex-start);
                            flex-direction: row;
                            .tip-item{
                                height: 40rpx;
                                line-height: 40rpx;
                                color: #FFFFFF;
                                font-size: 26rpx;
                                padding: 0 16rpx;
                                background: #3782FF;
                                border-radius: 8rpx;
                            }
                        }
                        .item-content-img{
                            @include flexWrap(flex-start);
                            flex-direction: row;
                            padding: 20rpx 0;
                            img{
                                width: calc((100% - 36rpx)/3);
                                height: 140rpx;
                                margin: 6rpx;
                                border-radius: 4rpx;
                            }
                            img:last-child{
                                margin-right: 0;
                            }
                        }
                    }
                    .item-foot{
                        @include flex(flex-start);
                        flex-direction: row;
                        .item-foot-left{
                            @include flex(flex-start);
                            flex-direction: row;
                            .foot-left-item{
                                @include flex(flex-start);
                                flex-direction: row;
                                img{
                                    width: 40rpx;
                                    height: 40rpx;
                                    margin-left: 10rpx;
                                }
                                text{
                                    color: #666666;
                                    font-size: 28rpx;
                                    height: 40rpx;
                                    line-height: 40rpx;
                                }
                            }
                        }
                        .item-foot-right{
                            margin-left: auto;
                            height: 40rpx;
                            line-height: 40rpx;
                            color: #999999;
                            font-size: 28rpx;
                        }
                    }
                }
                .needs-result-item:last-child{
                    border-bottom: none;
                }
            }
        }
        .news-result{
            background: #FFFFFF;
            margin-bottom: 92rpx;
            .news-result-head{
                height: 78rpx;
                padding: 0 30rpx;
                border-bottom: 2rpx solid #F1F1F1;
                @include flex(flex-start);
                flex-direction: row;
                text{
                    height: 40rpx;
                    line-height: 40rpx;
                    font-size: 28rpx;
                }
                .result-number{
                    color: #3782FF;
                    margin-left: 14rpx;
                }
            }
            .news-result-list{
                .news-result-null{
                    padding: 64rpx 0;
                    text-align: center;
                    color: #999999;
                    font-size: 28rpx;
                }
                .news-result-item{
                    padding: 30rpx;
                    @include flex(flex-start);
                    flex-direction: row;
                    border-bottom: 2rpx solid #E5E5E5;
                    .news-item-left{
                        width: calc(100% - 282rpx);
                        height: 180rpx;
                        .item-content-text{
                            @include ellipsis(2);
                            height: 84rpx;
                            line-height: 42rpx;
                            font-size: 30rpx;
                            margin-bottom: 16rpx;
                        }
                        .item-content-tip{
                            @include flex(flex-start);
                            padding-bottom: 16rpx;
                            flex-direction: row;
                            view{
                                height: 40rpx;
                                padding: 0 16rpx;
                                background: #3782FF;
                                border-radius: 8rpx;
                                font-size: 26rpx;
                                line-height: 40rpx;
                                margin-right: 10rpx;
                                color: #FFFFFF;
                            }
                        }
                        .item-content-time{
                            height: 28rpx;
                            line-height: 28rpx;
                            font-size: 24rpx;
                            color: #9B9B9B;
                        }
                    }
                    .news-item-right{
                        margin-left: auto;
                        width: 260rpx;
                        height: 180rpx;
                        border-radius: 10rpx;
                        overflow: hidden;
                    }
                }
            }
        }
        .vipUnit-result{
            background: #FFFFFF;
            margin-bottom: 92rpx;
            .vipUint-result-head{
                height: 78rpx;
                padding: 0 30rpx;
                border-bottom: 2rpx solid #F1F1F1;
                @include flex(flex-start);
                flex-direction: row;
                text{
                    height: 40rpx;
                    line-height: 40rpx;
                    font-size: 28rpx;
                }
                .result-number{
                    color: #3782FF;
                    margin-left: 14rpx;
                }
            }
            .vipUint-result-list{
                .vipUnit-result-item{
                    border-bottom: 1rpx solid #E5E5E5;
                    padding: 30rpx;
                    @include flex(flex-start);
                    flex-direction: row;
                    .item-left{
                        width: 130rpx;
                        height: 130rpx;
                        position: relative;
                        img{
                            width: 100%;
                            height: 100%;
                            border-radius: 360rpx;
                        }
                        .icon{
                            position: absolute;
                            right: 0rpx;
                            width: 40rpx;
                            height: 40rpx;
                            bottom: 0;
                        }
                    }
                    .item-right{
                        margin-left: auto;
                        width: calc(100% - 150rpx);
                        .item-name{
                            height: 40rpx;
                            line-height: 40rpx;
                            font-weight: bold;
                            font-size: 28rpx;
                            @include ellipsis(1);
                            margin-bottom: 10rpx;
                        }
                        .item-desc{
                            max-height: 74rpx;
                            line-height: 37rpx;
                            font-size: 24rpx;
                            color: #666666;
                            @include ellipsis(2);
                        }
                    }
                }
            }
        }
    }
</style>
